<template>
  <div>
    <search-main @handleSearch="handleSearch" :inputValue="value" />
    <div class="container_width home_wrap">
      <el-card class="box-card">
        <div class="title">标准公告</div>
        <div
          class="standard_item"
          v-for="(item, index) in standardNotice"
          :key="index"
          @click="goPath('/notice/detail', item.standardNoticeNo)"
        >
          <span class="item_left">{{ item.standardNoticeNo }}</span>
          <span class="item_center">{{ item.title }}</span>
          <span class="item_right">{{ item.publishDate }}</span>
        </div>
        <img
          src="../../assets/index_more.jpg"
          alt=""
          class="more_img"
          @click="goPath('/notice')"
        />
      </el-card>
      <el-card class="box-card">
        <div class="title">标准动态</div>
        <div
          class="standard_item"
          v-for="(item, index) in standardTrends"
          :key="index"
          @click="goPath('/basicsearch/detail', item.standardNo, item)"
        >
          <span class="item_left2">{{ item.standardNo }}</span>
          <span class="item_center item_center1">{{ item.title }}</span>
          <span class="item_right">{{ item.standardStatus }}</span>
        </div>
        <img
          src="../../assets/index_more.jpg"
          alt=""
          class="more_img"
          @click="goPath('/trends')"
        />
      </el-card>
      <el-card class="box-card">
        <div class="title">标准计划</div>
        <div
          class="standard_item"
          v-for="(item, index) in standardPlan"
          :key="index"
          @click="goPath('/plan/detail', item.standardPlanNo)"
        >
          <span class="item_left2">{{ item.standardPlanNo }}</span>
          <span class="item_center item_center2">{{ item.title }}</span>
          <span class="item_right">{{ item.standardization }}</span>
        </div>
        <img
          src="../../assets/index_more.jpg"
          alt=""
          class="more_img"
          @click="goPath('/plan')"
        />
      </el-card>
    </div>
  </div>
</template>

<script>
import { setUserId } from "@/utils/auth";
import {
  sourceVerify,
  standardPlans,
  standardNotices,
  standardDynamics,
} from "@/api/home.js";
import SearchMain from "@/components/SearchMain.vue";
export default {
  name: "Home",
  components: {
    SearchMain,
  },
  data() {
    return {
      value: "",
      standardNotice: [],
      standardTrends: [],
      standardPlan: [],
    };
  },
  created() {
    if (this.$route.query.token) {
      this.sourceVerify(this.$route.query.token);
    }
    this.init();
  },
  methods: {
    init() {
      standardPlans().then((res) => {
        if (res.code == 200) {
          this.standardPlan = res.data.content;
        }
      });
      standardNotices().then((res) => {
        if (res.code == 200) {
          this.standardNotice = res.data.content;
        }
      });
      standardDynamics().then((res) => {
        if (res.code == 200) {
          this.standardTrends = res.data.content;
        }
      });
    },
    sourceVerify(token) {
      sourceVerify(token).then((res) => {
        if (res.code == 200) {
          setUserId(res.data);
        }
      });
    },

    handleSearch(value) {
      if (value == "") {
        this.$message({
          message: "请输入内容进行检索！",
          type: "warning",
        });
        return;
      } else {
        this.$router.push({ path: "/basicsearch", query: { search: value } });
      }
    },
    goPath(path, no, row) {
      if (row) {
        this.$router.push({
          path,
          query: {
            row: JSON.stringify(row),
          },
        });
        return;
      } else {
        if (no) {
          this.$router.push({
            path,
            query: {
              no,
            },
          });
        } else {
          this.$router.push({ path });
        }
      }
    },
  },
};
</script>
<style lang="scss">
.home_wrap {
  height: 490px;
  display: flex;
  justify-content: space-between;
  padding: 40px 45px 0;
  .box-card {
    width: 360px;
    position: relative;
    .el-card__body {
      padding: 0;
      border-top: 10px solid #2f74d3;
      .title {
        height: 50px;
        line-height: 50px;
        color: #2f74d3;
        text-align: center;
        font-size: 18px;
        border-bottom: 1px solid #d9e0e8;
      }
    }
  }
  .standard_item {
    line-height: 34px;
    border-bottom: 1px dashed #ccc;
    display: flex;
    font-size: 14px;
    padding: 5px 18px;
    span {
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
    .item_left {
      width: 100px;
    }
    .item_left2 {
      width: 115px;
    }
    .item_center {
      width: 160px;
      padding-right: 15px;
    }
    .item_center1 {
      width: 170px;
    }
    .item_center2 {
      width: 175px;
    }
    &:last-of-type {
      border-bottom: none;
    }
    &:hover {
      cursor: pointer;
      color: #2f74d3;
    }
  }
}
</style>
